<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>autocompleter</title>
	<link rel="stylesheet" href="./jquery.autocompleter.css">
	<style type="text/css">
		*{-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}
		.field{position:relative;width:400px;margin:0 auto;}
		.field input {width: 100%;color:#000000;height:40px;font-size:16px;padding: 0 12px;border: 0;background:#fff;border:1px solid #ccc;}
		.autocompleter {
		    width: 100%;
		    background: #fff;
		    position: absolute;
		    top: 40px;
		    left: 0;
		    border:1px solid #ccc;
		    z-index: 100;
		}
		.autocompleter-list {
		    list-style: none;
		    text-align: left;
		}
		.autocompleter-item {
		    padding: 6px 12px;
		    color: #444444;
		    font-size:16px;
		    cursor: pointer;
		}
		.autocompleter-item-selected {
		    background: #eee;
		}
		.autocompleter-item strong {
		    background: #f9de8f;
		    text-shadow: 0 1px 0 #ffffff;
		}
		.autocompleter-item:hover {
		    background: #eee;
		}
		.autocompleter-hint {
		    color: #ccc;
		    text-align: left;
		    top: -40px;
		   	height: 40px;
		   	line-height:40px;
		    left: 0;
		    font-size: 16px;
		    padding:0 12px;
		}
	</style>
</head>
<body>
	<div class="field">
        <input type="text" name="nope" id="nope" autocomplete="off" placeholder="" maxlength="40" />
    </div>
	
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

    <div class="field">
        <input type="text" name="demo" id="demo" autocomplete="off" placeholder="" maxlength="40" />
    </div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="./dist/jquery.autocompleter.js"></script>
	<script type="text/javascript">
		var data = [
			{label: 'one' },
			{label: 'two' },
			{label: 'three' }
		];
		$(function() {
		  	$('#nope').autocompleter({ source: data });
		});
	</script>


	<script type="text/javascript">
		var colors =[
		    {
		        "hex": "150条",
		        "label": "中国1",
		        "rgb": "(239, 222, 205)"
		    },{
		        "hex": "90条",
		        "label": "中国2",
		        "rgb": "(239, 222, 205)"
		    },{
		        "hex": "20条",
		        "label": "中国3",
		        "rgb": "(239, 222, 205)"
		    },{
		        "hex": "60条",
		        "label": "日本",
		        "rgb": "(205, 149, 117)"
		    },{
		        "hex": "1条",
		        "label": "美国",
		        "rgb": "(253, 217, 181)"
		    }
		];

		$('#demo').autocompleter({
	        // 下拉匹配则加粗
	        highlightMatches: true,

	        // object to local or url to remote search
	        source: colors,

	        // 下拉框的模版
	        template: '{{ label }} <span>({{ hex }})</span>',

	        // show hint
	        hint: true,

	        // 为空时是否初始提示信息
	        empty: true,

	        // max results
	        limit: 4,

	        callback: function (value, index, selected) {
	        	// 这里ajax请求，参数参考：query
	        	console.log(value);
	        	console.log(index);
	        	console.log(selected)
	            // if (selected) {
	            //     $('.icon').css('background-color', selected.hex);
	            // }
	        }
	    });

	</script>
</body>
</html>